<template>
	<!--  -->
  <a-modal
    title="发货明细"
    width="40%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
		@cancel="handleCancel"
		:footer="null"
  >
    <a-spin :spinning="false">
      <a-form :form="form" layout="inline" labelAlign="right">
        <s-table
					ref="table"
					style="margin-top: 15px;"
					size="default"
					:columns="columns"
					:data="loadData"
					:alert="true"
				>
				</s-table>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {page} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'
import {STable} from '@/components'
  export default {
		components: {STable},
    data () {
      return {
				record:{},
				queryParam: {},
        columns: [
					{
						title: '序号',
						width: '80px',
						customRender: (text, record, index) => `${index + 1}`
					},
					{
						title: '产品名称',
						dataIndex: 'materialName'
					},
					{
						title: '总数量',
						dataIndex: 'totalNumber'
					},
					{
						title: '发货数量',
						dataIndex: 'number'
					},
					{
						title: '已发货数量',
						dataIndex: 'deliveredNumber'
					},
				
				],
				// 加载数据方法 必须为 Promise 对象
				loadData: parameter => {
					console.log('record',this.record)
					let query = {
						...this.queryParam,
						...parameter,
					}
					return page(query).then((res) => {
						console.log('res',res)
						return res.data
					})
				},
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
      }
    },
    methods: {
      // 初始化方法
      init (record) {
				this.record = {...record}
				this.queryParam.orderId = record.orderId
        this.visible = true
				this.$refs.table.refresh(true)
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
